<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <!-- Page & Monaco styling -->
        <link href="static/styles.css" rel="stylesheet"/>
        <title>RoboML in Langium</title>
    </head>
    <body>
        <main>
            <h1>RoboML in Langium</h1>
            <div id="buttons">
                <input class="build" type="button" value="Parse and Validate" onclick="window.parseAndValidate()">
                <input class="build" type="button" value="Execute Simulation" onclick="window.execute()">
                <input class="build" type="button" value="Restart Simulation" onclick="window.resetSimulation()">
                <input class="build" type="button" value="Clear Data" onclick="window.setup()">
            </div>

            <div id="page-wrapper">
                <div class="editor">
                    <div class="wrapper">
                        <!-- Monaco Root -->
                        <div id="monaco-editor-root"></div>
                    </div>
                </div>
                <div class="simulator" id="simulator-wrapper">
                    <canvas id="simulator"></canvas>
                </div>
            </div>

            <div id="errorModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <div class="modal-header">
                        <span class="close">&times;</span>
                        <h2>RoboML Type checking errors</h2>
                    </div>
                    <div class="modal-body"></div>
                </div>
            </div>

            <div id="validModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <div class="modal-header">
                        <span class="close">&times;</span>
                        <h2>RoboML Type checking validation</h2>
                    </div>
                    <div class="modal-body">
                        Your code is correctly typed.
                    </div>
                </div>
            </div>
            
            <footer>
                <p style="font-style:italic">Powered by</p>
                <img width="125" src="https://langium.org/assets/langium_logo_w_nib.svg" alt="Langium">
            </footer>
    </main>
    </body>
    <script type="module">
        // vite is used to resolve the included TypeScript files
        import './src/web/lib/block'
        import './src/web/lib/robot'
        import './src/web/lib/wall'
        import './src/web/lib/sketch'
        import { configureMonacoWorkers } from './src/setupCommon';
        import { executeClassic } from './src/setupClassic';

        configureMonacoWorkers();
        // keep a reference to a promise for when the editor is finished starting, we'll use this to setup the canvas on load
        const startingPromise = executeClassic(document.getElementById('monaco-editor-root'));
    </script>
</html>
